<template>
    <div class="vo-dragform-toolbar">
        <div class="toolbar-content">
            <el-button-group>
                <router-link to="/sf">首页</router-link>
                <el-divider direction="vertical"></el-divider>
                <router-link to="/drag-schema">说明</router-link>
            </el-button-group>
            <el-button-group>
                <el-button size="mini" icon="el-icon-view" @click="preview('full')">预览(全屏)</el-button>
                <el-button size="mini" icon="el-icon-view" @click="preview('modal')">预览(弹框)</el-button>
                <el-button size="mini" icon="el-icon-view" @click="JSONView">JSON代码</el-button>
            </el-button-group>
        </div>

        <el-dialog title="预览" width="1000px" :fullscreen="fullscreen" :visible.sync="previewVisible">
            <SchemaPreview v-if="previewVisible" ref="preview" :schema="schema"></SchemaPreview>
        </el-dialog>

        <el-dialog title="代码" width="90%" fullscreen :visible.sync="codeVisible" destroy-on-close>
            <el-row :gutter="20">
                <el-col :span="12">
                    <SchemaCode v-if="codeVisible" ref="schemaCode" :schema="schema"></SchemaCode>
                </el-col>
                <el-col :span="12">
                    <RulesCode v-if="codeVisible" ref="rulesCode" :schema="schema"></RulesCode>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
import SchemaPreview from './components/Preview.vue'
import SchemaCode from './components/SchemaCode.vue'
import RulesCode from './components/RulesCode.vue'

export default {
    name: 'VoDragLayoutFormToolbar',
    components: {
        SchemaPreview,
        SchemaCode,
        RulesCode
    },
    props: {
        schema: Object,
        selectPropery: Object
    },
    data() {
        return {
            fullscreen: false,
            previewVisible: false,
            codeVisible: false
        }
    },
    methods: {
        preview(type) {
            if (type === 'full') {
                this.fullscreen = true
            } else {
                this.fullscreen = false
            }
            this.previewVisible = true
            this.$nextTick(() => {
                this.$refs.preview.load()
            })
        },
        JSONView() {
            this.codeVisible = true
            this.$nextTick(() => {
                this.$refs.schemaCode.load()
                this.$refs.rulesCode.load()
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.vo-dragform-toolbar{
    border-bottom: 1px solid #DCDFE6;
    height: 50px;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .toolbar-content{
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
</style>
